<template>
  <div class="container">
      <div class='parkInfo'>
        <ul style="padding-left: 13px">
          <li><img src="../../assets/images/003.png" style="width: 20px;height: 20px;margin-right: 6px;"/>封闭停车场</li>
          <li><img src="../../assets/images/001.png" style="width: 20px;height: 20px;margin-right: 6px;"/>道路停车场</li>
          <li><img src="../../assets/images/002.png" style="width: 20px;height: 20px;margin-right: 6px;"/>诱导屏</li>
          <li><img src="../../assets/map_images/AAAA.png" style="width: 20px;height: 20px;margin-right: 6px;"/>准停道路</li>
          <li><img src="../../assets/map_images/BBBB.png" style="width: 20px;height: 20px;margin-right: 6px;"/>禁停道路</li>
          <li><img src="../../assets/map_images/CCCC.png" style="width: 20px;height: 20px;margin-right: 6px;"/>限停道路</li>
          <li><img src="../../assets/map_images/DDDD.png" style="width: 20px;height: 20px;margin-right: 6px;"/>临停道路</li>
        </ul>
      </div>
      <div class='parkSearch'>
        <el-form :inline="true">
            <el-form-item  label-width="0" >
              <el-input  prefix-icon="el-icon-search"  v-model="parkName"  @keyup.enter.native ='keyenterSerch' placeholder="停车场名称"  clearable/>
            </el-form-item>
            <el-form-item >
              <el-popover placement="bottom-start"  width="200" trigger="click" >
                <a  v-if="noneserch" >{{nonetips}}</a>
                <div v-if="isserch" v-for="(item,index) in searchResult">
                  <a   @click="serachli(item)">{{item.parkName}}</a><br/>
                  <li>剩余&nbsp;&nbsp;{{item.remain}}/{{item.total}}&nbsp;&nbsp;总数</li>
                </div>
                <!--<a  v-if="isserch" v-for="item in searchResult" @click="serachli(item)">{{item.parkName}}</a>-->
                <el-button id="search" class="btnSearch1" type="primary"  slot="reference" :disabled="!parkName" @click="searchParks(parkName)">搜索</el-button>
              </el-popover>
              <el-button class="btnSearch1" type="primary" :disabled="!parkName" @click="removeSearch">重置</el-button>
            </el-form-item>
          </el-form>
      </div>
    <!--</div>-->
    <div class='mapContent'>
      <baidu-map  id='parkMap' :center='mapcenter' :zoom="14" :scrollWheelZoom="true">
        <bm-navigation anchor="BMAP_ANCHOR_BOTTOM_RIGHT"></bm-navigation>
        <!--道路停车-->
        <bm-marker v-for='item in RoadParkList'  :position="{lng:item.parkLong, lat: item.parkLati}"  :animation='item.animation ? item.animation:"null"'
                   :icon="{url: barkerMapImg2, size: {'width':38,'height':50}}"
                   @click="openInfo(item)">
          <bm-label :content='item.parkName' :labelStyle="{color: '#60BA00', fontSize : '12px',border: '1px solid #60BA00',borderRadius:'8px'}" :offset="{width: 0, height: 40}"/>
        </bm-marker>
        <bm-info-window :position="{lng: infoWindow.longirude, lat: infoWindow.latitude}" :show="show" :autoPan="autoPan" :closeOnClick="closeOnClick"
                        @close="infoWindowClose" @open="infoWindowOpen">
          <p style="margin:0 0 5px 0;padding: 0;font-size: 16px"><strong>{{this.infoWindow.title}}</strong></p>
          <p style="margin:0 0 5px 0;padding: 0;font-size: 14px">停车场编号：{{this.infoWindow.parkNo}}</p>
          <p style="margin:0 0 5px 0;padding: 0;font-size: 14px">所属单位：{{this.infoWindow.dw}}</p>
          <p style="margin:0 0 5px 0;padding: 0;font-size: 14px">车场类型：{{this.infoWindow.type==1?"道路停车场":"公共停车场"}}</p>
          <p v-if="this.infoWindow.totalNum === -1" style="margin:0 0 5px 0;padding: 0;font-size: 14px">
            停车位信息：在建</p>
          <p v-else style="margin:0 0 5px 0;padding: 0;font-size: 14px">
            停车位信息：{{this.infoWindow.totalNum}}个泊位，{{this.infoWindow.surplus}}个可用</p>
        </bm-info-window>
        <!--封闭停车-->
        <bm-marker v-for='item in CloseParkList'  :position="{lng:item.parkLong, lat: item.parkLati}"
                   :icon="{url: barkerMapImg, size: {'width':38,'height':50}}"
                   @click="openInfo(item)">
          <bm-label :content='item.parkName' :labelStyle="{color: '#006AE3', fontSize : '12px',border: '1px solid #006AE3',borderRadius:'8px'}" :offset="{width: 0, height: 40}"/>
        </bm-marker>
        <bm-info-window :position="{lng: infoWindow.longirude, lat: infoWindow.latitude}" :show="show" :autoPan="autoPan" :closeOnClick="closeOnClick"
                        @close="infoWindowClose" @open="infoWindowOpen">
          <p style="margin:0 0 5px 0;padding: 0;font-size: 16px"><strong>{{this.infoWindow.title}}</strong></p>
          <p style="margin:0 0 5px 0;padding: 0;font-size: 14px">停车场编号：{{this.infoWindow.parkNo}}</p>
          <p style="margin:0 0 5px 0;padding: 0;font-size: 14px">所属单位：{{this.infoWindow.dw}}</p>
          <p style="margin:0 0 5px 0;padding: 0;font-size: 14px">车场类型：{{this.infoWindow.type==1?"道路停车场":"公共停车场"}}</p>
          <p v-if="this.infoWindow.totalNum === -1" style="margin:0 0 5px 0;padding: 0;font-size: 14px">
            停车位信息：在建</p>
          <p v-else style="margin:0 0 5px 0;padding: 0;font-size: 14px">
            停车位信息：{{this.infoWindow.totalNum}}个泊位，{{this.infoWindow.surplus}}个可用</p>
        </bm-info-window>
        <!--诱导点-->
        <bm-marker v-for='item in InductionList'  :position="{lng:item.lng, lat: item.lat}" :animation='item.animation ? item.animation:"null"'
                   :icon="{url: barkerMapImg3, size: {'width':38,'height':50}}"
                  >
          <bm-label :content='item.guidanceName' :labelStyle="{color: '#FF5722', fontSize : '12px',border: '1px solid #FF5722',borderRadius:'8px'}" :offset="{width: 0, height: 40}"/>
        </bm-marker>
        <!--道路折线-->
        <bm-polyline  v-for='item in roadlineData' :path="item.point" :stroke-color="item.color" :stroke-opacity="0.5" :stroke-weight="5" :editing="false" ></bm-polyline>
      </baidu-map>
    </div>
  </div>
</template>

<script>
  import { RoadParkInfo, CloseParkInfo, searchparkInfo, Inductioninfo } from '../../api/parkingResources/parkingMapInfo';
  export default {
    name: 'index',
    data() {
      return {
        mapcenter: { // 中心点
          lng: 117.536943,
          lat: 36.702987
        },
        // 折现用的点
        roadlineData: [
          {
            color: 'red',
            point: [
              { lng: 117.520502, lat: 36.692105 },
              { lng: 117.524455, lat: 36.692191 },
              { lng: 117.52891, lat: 36.693436 }
            ]
          },
          {
            color: 'blue',
            point:[
              { lng: 117.536492, lat: 36.698529 },
              { lng: 117.536815, lat: 36.701191 },
              { lng: 117.536168, lat: 36.695982 },
              { lng: 117.536204, lat: 36.693465 }
            ]
          }
        ],
        anmiteIndex: '', // 动画点索引
        // 信息窗显示
        show: false,
        // 封闭车场列表
        CloseParkList: '',
        // 道路车场列表
        RoadParkList: '',
        // 诱导列表
        InductionList: '',
        parkName: '', // 搜索用 车场名称
        searchResult: '',
        isserch: false,
        noneserch: false,
        nonetips: '',
        markerArry: [], // 标注点
        remoAntMarker: '',
        // 标签 样式
        labelStyle: {
          color: 'red',
          fontSize: '12px'
        },
        // 信息窗
        infoWindow: {
          longirude: 0,
          latitude: 0,
          title: '',
          parkNo: '',
          dw: '',
          chargeType: '',
          totalNum: '',
          surplus: '',
          type: ''
        },
        autoPan: true,
        closeOnClick: false,

        barkerMapImg: '',
        barkerMapImg2: '',
        barkerMapImg3: ''
      }
    },
    watch: {
      RoadParkList(Val) {
        this.RoadParkList = Val
      },
      CloseParkList(Val) {
        this.parkingResources = Val
      }
    },
    mounted() {
      // 数据获取
      this.barkerMapImg = require('../../../src/assets/images/003.png')
      this.barkerMapImg2 = require('../../../src/assets/images/001.png')
      this.barkerMapImg3 = require('../../../src/assets/images/002.png')
      this.requestAllData();
    },
    methods: {
      // 数据请求
      requestAllData() {
        // 道路停车场信息
        RoadParkInfo().then((data) => {
          this.RoadParkList = data;
        })
        // 封闭停车场
        CloseParkInfo().then((data) => {
          this.CloseParkList = data;
        })
        // 诱导屏信息
        Inductioninfo().then((data) => {
          console.log(data);
          this.InductionList = data;
        })
      },
      // 回车事件
      keyenterSerch() {
        document.getElementById('search').click()
      },
      // 打开信息窗体
      openInfo(val) {
        this.infoWindow.title = val.parkName
        this.infoWindow.longirude = val.parkLong
        this.infoWindow.latitude = val.parkLati
        this.infoWindow.parkNo = val.parkNo
        this.infoWindow.dw = val.parkOrg
        this.infoWindow.totalNum = val.total
        this.infoWindow.type = val.type
        this.infoWindow.surplus = val.remain
        this.show = true
      },
      // 信息窗显示与否
      infoWindowClose(e) {
        this.show = false
        // 恢复初始
        // 去掉 动画  回到地图中心
        var backcenter = { // 中心点
          lng: 117.536943,
          lat: 36.702987
        }
        this.mapcenter = backcenter // 地图位置移动到中央
        // 去掉动画
        this.RoadParkList[this.anmiteIndex].animation = 'null'
      },
      infoWindowOpen(e) {
        this.show = true
      },
      // 搜索
      searchParks(name) {
        searchparkInfo(name).then((data) => {
          console.log('搜索', data)
          if (data.length > 0) {
            this.searchResult = data
            this.noneserch = false
            this.nonetips = ''
            this.isserch = true
          } else {
            this.noneserch = true
            this.isserch = false
            this.nonetips = '暂无搜索结果'
          }
        })
      },
      // 点击搜索结果
      serachli(item) {
        var repoint = {
          lng: item.parkLong,
          lat: item.parkLati
        }
        this.mapcenter = repoint // 地图位置移动到中央
        // 确定点
        for (var i in this.RoadParkList) {
          if (item.parkName === this.RoadParkList[i].parkName) {
            this.anmiteIndex = i
            // 添加动画
            this.$set(this.RoadParkList[i], 'animation', 'BMAP_ANIMATION_BOUNCE')
          }
        }
      },
      // 重置搜索
      removeSearch() {
        this.parkName = ''
        this.noneserch = false
        this.isserch = false
        // 去掉 动画  回到地图中心
        var backcenter = { // 中心点
          lng: 117.536943,
          lat: 36.702987
        }
        this.mapcenter = backcenter
        // 去掉动画
        this.RoadParkList[this.anmiteIndex].animation = 'null'
      }
    }
  }
</script>
<style scoped>
  .container{
    background-color: #1A4380;
    padding-top: 10px;
    padding-bottom: 42px;
    position: relative;
    width: 100%;
    height: 100%;
    margin: 0;
  }
  .mapContent{
    position: relative;
    padding-left: 17px;
    padding-right: 17px;
    width: 100%;
    height: 90vh;
  }
 #parkMap {
    width: 100%;
   height: 100%;
  }
  .parkOption{
    height: 50px;
    width: 95%;
    display: flex;
    flex-direction: row ;
    justify-content: space-between;
    align-items:center;
    align-content: center;
    margin-left: 20px;
    position: absolute;
    top: 40px;
    z-index: 100;
  }
  .parkSearch{
    height: 50px;
    min-width: 280px;
    margin-top:10px ;
    position: fixed;
    top:100px;
    right: 18px;
    z-index: 200;
  }
  .parkInfo{
    height: 232px;
    width: 112px;
    background: #FFFFFF;
    box-shadow: 0 2px 8px 0 rgba(194,194,194,0.50);
    border-radius: 1px;
    position: fixed;
    top:100px;
    left: 250px;
    z-index: 200;
  }
  .parkInfo ul{
    margin-top: 15px;
    height: 100%;
  }
  li {
    height: 16px;
    margin-bottom: 15px;
    list-style-type: none;
    font-size: 13px;
  }
  .el-card__body{
    padding: 0px;
  }
  .info-item{
    height: 20px;
    padding: 0 5px;
    margin-top:10px;
    margin-bottom:10px;
  }
  .el-tag ,.el-tag--medium{
    font-size: 15px;
  }
  .el-collapse-item__header{
    text-align: center !important;
    margin: auto;
  }
</style>
